<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{width: 200px; height: 100px; background-color: red;position: absolute; text-align: center; color: #fff; font-weight: bold;}
	</style>
	<script type="text/javascript">

	//第二：将函数内用到的具体的对象或局部变量，设置为全局变量
	var oDiv = null;
	var disX = 0;
	var disY = 0;

	window.onload = function (){
		oDiv = document.getElementById('div1');
		
		oDiv.onmousedown = fnDown;
	}

	//第一：将所有嵌套的函数都揪出来（从里到外）
	function fnDown(ev){
			var ev = ev || event;

			disX = ev.clientX - this.offsetLeft;
			disY = ev.clientY - this.offsetTop;

			document.onmousemove = fnMove;

			document.onmouseup = fnUp;

			this.setCapture && this.setCapture();
			return false;
		}	

	function fnMove(ev){
		var ev = ev || event;

		var L = ev.clientX - disX;
		var T = ev.clientY - disY;

		oDiv.style.left = L + 'px';
		oDiv.style.top = T + 'px';
	}

	function fnUp(){
		document.onmousemove = document.onmouseup = null;
		oDiv.releaseCapture && oDiv.releaseCapture();
	}
	</script>
</head>
<body>
	<div id="div1">拖拽我</div>
</body>
</html>